<template>
  <div class="preview-contioner">
    <div class="title-preview">
      <h1>{{ props.title }}</h1>
      <p>{{ props.updateTime }}</p>
    </div>
    <a-divider dashed><StarOutlined /></a-divider>
    <div
      v-html="props.content"
      class="preview-content"
      v-if="props.editorType === 1"
    ></div>
    <div v-else>
      <MackdownEditor
        :value="props.content"
        :toolbars="[]"
        :disabled="true"
        :preview="true"
      />
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import { StarOutlined } from "@ant-design/icons-vue";
import MackdownEditor from "@/components/MackdownEditor";

const props = defineProps({
  content: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  updateTime: {
    type: String,
    default: "",
  },
  editorType: {
    type: Number,
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
.preview-contioner {
  .title-preview {
    h1 {
      font-size: 20px;
    }
  }
  :deep(.preview-content) {
    img {
      max-width: 100%;
    }
  }
}
</style>